<template>
    <div style='height:100%;width:100%;position:relative;'>
        <div class='_rotate'></div>
    </div>
</template>

<script>
export default {
    name : 'loading'
}
</script>

<style lang='scss' scope>
    @keyframes _rotate{
        0%{transform:rotate(0);}
        0%{transform:rotate(360deg);}
    }
    ._rotate{
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(#1cb2ff,transparent);
        left: 50%;
        top: 50%;
        margin-left: -25px;
        margin-top: -25px;

        animation: _rotate 1s linear 0s infinite normal forwards;

        &:after{
            content: '';
            position: absolute;
            width: 80%;
            height: 80%;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background:#121825;
        }
    }
</style>